<template>
  <div>
    <vxe-grid v-bind="grid" ref="xGrid">
      <template #toolbar_buttons>
        <eip-toolbar @map="districtMapShow"></eip-toolbar
      ></template>
      <template #toolbar_tools> </template>
      <template #loading>
        <a-spin></a-spin>
      </template>
      <template #empty>
        <eip-empty />
      </template>
      <template #radio="{ row, checked }">
        <span @click.stop="$refs.xGrid.toggleCheckboxRow(row)">
          <a-radio :checked="checked"> </a-radio>
        </span>
      </template>
      <template #isFreeze="{ row }">
        <a-switch :checked="row.isFreeze" />
      </template>
      <template #operate="{ row }">
        <a-tooltip @click="tableMapRow(row)" title="地图">
          <label class="text-eip eip-cursor-pointer">地图</label>
        </a-tooltip>
      </template>
    </vxe-grid>

    <districtmap
      ref="map"
      v-if="map.visible"
      :visible.sync="map.visible"
      :title="map.title"
      :lng="map.lng"
      :lat="map.lat"
    >
    </districtmap>
  </div>
</template>

<script>
import { query } from "@/services/system/district/list";

import { selectTableRowRadio } from "@/utils/util";
import districtmap from "./map";
export default {
  components: { districtmap },
  data() {
    return {
      grid: {
        id: "district",
        loading: true,
        height: this.eipTableHeight(),
        treeConfig: {
          transform: true,
          rowField: "districtId",
          parentField: "parentId",
          lazy: true,
          hasChild: "hasChild",
          loadMethod: this.loadChildrenMethod,
          trigger: "row",
        },
        customConfig: {
          mode: "popup",
        },
        menuConfig: {
          header: {
            options: [
              [
                {
                  code: "exportAll",
                  name: "导出所有.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
          body: {
            options: [
              [
                {
                  code: "print",
                  name: "打印",
                  prefixIcon: "vxe-icon-print",
                  visible: true,
                  disabled: false,
                },
                {
                  code: "export",
                  name: "导出.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
          footer: {
            options: [
              [
                {
                  code: "exportAll",
                  name: "导出所有.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
        },
        printConfig: {},
        exportConfig: {},
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        columns: [
          {
            type: "radio",
            width: 50,
            slots: {
              radio: "radio",
            },
            fixed: "left",
          },
          { type: "seq", width: 50, fixed: "left" },
          {
            field: "name",
            treeNode: true,
            title: "名称",
            fixed: "left",
            minWidth: 220,
            showOverflow: "ellipsis",
          },
          {
            field: "districtId",
            title: "代码",
            width: 120,
          },
          {
            field: "shortName",
            title: "简称",
            width: 120,
          },
          {
            field: "cityCode",
            title: "城市代码",
            width: 120,
          },
          {
            field: "zipCode",
            title: "邮编",
            width: 120,
          },

          {
            field: "lng",
            title: "经度",
            width: 130,
          },

          {
            field: "lat",
            title: "纬度",
            width: 130,
          },
          {
            field: "pinYin",
            title: "拼音",
            width: 150,
          },
          {
            field: "isFreeze",
            title: "禁用",
            width: 80,
            showOverflow: true,
            slots: {
              default: "isFreeze",
            },
          },
          {
            field: "orderNo",
            title: "排序",
            width: 80,
          },
          {
            title: "操作",
            field: "operate",
            width: 100,
            align: "center",
            fixed: "right",
            slots: {
              default: "operate",
            },
          },
        ],
        proxyConfig: {
          ajax: {
            query: ({ page, sorts, filters }) => {
              return new Promise((resolve) => {
                query("100000000000").then((result) => {
                  if (result.code == this.eipResultCode.success) {
                    result.data.forEach((item) => {
                      item.hasChild = item.levelType == 5 ? false : true;
                    });
                    resolve(result.data);
                  }
                  this.grid.loading = false;
                });
              });
            },
          },
        },
      },

      map: {
        visible: false,
        lng: "",
        lat: "",
        title: "",
      },
    };
  },
  methods: {
    loadChildrenMethod({ row }) {
      let that = this;
      // 异步加载子节点
      return new Promise((resolve) => {
        setTimeout(() => {
          query(row.districtId).then((result) => {
            if (result.code == that.eipResultCode.success) {
              result.data.forEach((item) => {
                item.hasChild = item.levelType == 5 ? false : true;
              });
              resolve(result.data);
            }
          });
        }, 500);
      });
    },

    /**
     * 区域地图
     */
    districtMapShow() {
      let that = this;
      selectTableRowRadio(
        that.$refs.xGrid,
        function (row) {
          that.map.lng = row.lng;
          that.map.lat = row.lat;
          that.map.title = row.name;
          that.map.visible = true;
        },
        that
      );
    },

    /**
     * 地图
     */
    tableMapRow(row) {
      this.map.lng = row.lng;
      this.map.lat = row.lat;
      this.map.title = row.name;
      this.map.visible = true;
    },
  },
};
</script>
